<!--
 * @Author: yantong 11608542+yan_tongone@user.noreply.gitee.com
 * @Date: 2023-01-06 17:35:17
 * @LastEditors: yantong 11608542+yan_tongone@user.noreply.gitee.com
 * @LastEditTime: 2023-01-07 14:43:04
 * @FilePath: \vue-admin-template-master\src\views\employees\component\RuleDialog.vue
 * @Description: 分配角色
-->
<!--  -->
<template>
  <el-dialog title="分配角色" :visible.sync="ruleDialog">
    <el-checkbox-group v-model="radioIdList">
      <el-checkbox
        :label="item.id"
        v-for="(item, index) in roleList"
        :key="item.id"
        >{{ item.name }}</el-checkbox
      >
    </el-checkbox-group>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="userAssignRoles"
          >确定</el-button
        >
        <el-button size="small" @click="changeOut">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getRoles, assignRoles } from "@/api/employees";
export default {
  name: "Com",
  data() {
    return {
      total: 0,
      roleList: [],
      radioIdList: this.roleIds,
    };
  },
  props: ["ruleDialog", "roleIds","userId"],
  components: {},

  computed: {},

  mounted() {
    this.getRolesList();
   
  },

  methods: {
    async getRolesList() {
      let res = await getRoles();
      this.total = res.total;
      this.roleList = res.rows
    },



    // 关闭模态框
    changeOut() {
      // 清空数组
      this.radioIdList = [];
      this.$emit("changeDialog");
    },

    // 给用户分配角色
    async userAssignRoles() {
      // console.log(this.userId,"userId");
      let res = await assignRoles({id: this.userId,roleIds:this.radioIdList});
      this.$message.success('分配成功')
       //   关闭窗体
       this.$emit('changeDialog')
    },
  },
  watch: {},
  mixins: [],
};
</script>
<style scoped></style>
